<template>
	<uni-notice-bar scrollable single text="您好!亲爱的山水用户,欢迎提问,我们将会用最优质的答案为您回答!"></uni-notice-bar>
	<view class="chat-container">
		<view v-for="(message, index) in messages" :key="index"
			:class="['message', message.sender === 'user' ? 'user-message' : 'other-message']">

			<image class="avatar" :class="message.sender === 'user' ? 'user-avatar' : 'opponent-avatar'" :src="index % 2 === 0 ? 'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7' : 
			'https://th.bing.com/th?id=ODLS.b2312089-0c37-4cb2-a84c-461649050969&w=32&h=32&qlt=93&pcl=fffffa&o=6&pid=1.2'">
			</image>

			<view class="message-content">
				<view class="message-text" v-if="message.text !== ''">{{ message.text }}</view>
				<view class="message-text" v-else-if="message.text === '' && message.sender === 'opponent'">
					请稍等
					<image src="../../static/jiazai.gif"
						style="height: 16px; width: 58px; vertical-align: text-bottom; margin-left: 5px;"></image>
				</view>
			</view>
		</view>
	</view>
		
	<view class="input-container">
		<view class="image-container" style="margin-left: 18px; margin-top: 4px;">
			<image style="height: 16px; width: 16px;" src="../../static/logo.png"></image>
		</view>
		<view style="width: 80%; border-radius: 30px;">
			<view style="height: 100%; margin: 0px 0px 0 -4%;">
				<fui-textarea v-model="newMessage" labelWidth="240" autoHeight="true" height="40rpx" min-height="40rpx"
					placeholder="请输入内容"></fui-textarea>
			</view>
		</view>
		<view style="width: 30%; margin-left: 11px;">
			<fui-button @click="sendMessage" radius="100px" height="50px" margin="[-5px,0px,0px,0px]"
				text="发送"></fui-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const userAvatar =
		'https://th.bing.com/th?id=ODLS.b2312089-0c37-4cb2-a84c-461649050969&w=32&h=32&qlt=93&pcl=fffffa&o=6&pid=1.2';
	const opponentAvatar =
		'https://tse2-mm.cn.bing.net/th/id/OIP-C.jHUH4s7TQ48X_B-1iozuJgHaHa?w=207&h=207&c=7&r=0&o=5&dpr=1.5&pid=1.7';

	// 初始化时将消息数组设为空
	const messages = ref([]);

	const newMessage = ref('');
	const loading = ref(false);

	const sendMessage = () => {
		if (newMessage.value.trim() !== '') {
			// 发送用户消息
			messages.value.push({
				sender: 'user',
				text: newMessage.value
			});

			const messageToSend = newMessage.value;
			newMessage.value = ''; // 清空输入框

			// 显示加载中的消息
			messages.value.push({
				sender: 'opponent',
				text: '' // 用于显示加载状态的空消息
			});
			loading.value = true;

			// 模拟请求 AI 服务
			uni.request({
				url: 'http://localhost:5657/chat/AI',
				method: 'post',
				data: {
					requestBody: messageToSend,
					openId: '07282K_-0XheuX4AkOPFHssSmYYkszco8DTFH9snJ1HsFM8'
				},
				success: (Res) => {
					const aimessage = Res.data;
					loading.value = false;

					if (aimessage && aimessage.trim() !== '') {
						// 替换最后一条对方的空消息为实际的 AI 回复
						messages.value[messages.value.length - 1].text = aimessage;
					} else {
						messages.value[messages.value.length - 1].text = '对不起，未能获取有效的响应。';
					}
				},
				fail: (error) => {
					loading.value = false;
					messages.value[messages.value.length - 1].text = '请求失败，请重试。';
				}
			});
		}
	}
</script>

<style>
	/* 样式与原来的保持一致 */
	.chat-container {
		padding: 10px;
		margin-bottom: 80px;
		/* Prevent chat container from overlapping with the input */
	}

	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.user-message {
		flex-direction: row-reverse;
		/* 用户消息头像和内容排列顺序为头像在右，内容在左 */
	}

	.other-message {
		flex-direction: row;
		/* 对方消息头像和内容排列顺序为头像在左，内容在右 */
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-left: 10px;
	}

	.message-content {
		max-width: 60%;
		background-color: #f1f1f1;
		border-radius: 15px;
		padding: 10px;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
	}

	.user-message .message-content {
		background-color: #d1e7dd;
		/* 用户消息背景色为淡绿色 */
	}

	.other-message .message-content {
		background-color: #f1f1f1;
		/* 对方消息背景色为淡灰色 */
	}

	.message-text {
		font-size: 14px;
		color: #333;
	}


	.opponent-avatar {
		margin-left: 10px;
		margin-right: 10px;
	}

	.message-content {
		max-width: 60%;
		background-color: #f1f1f1;
		border-radius: 15px;
		padding: 10px;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
	}

	.user-message .message-content {
		background-color: #d1e7dd;
	}

	.other-message .message-content {
		background-color: #f1f1f1;
	}

	/* 	.message-text {
		font-size: 14px;
		color: #333;
	} */

	.input-container {
		position: fixed;
		bottom: 15px;
		left: 10px;
		width: 90%;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 32px;
		display: flex;
		align-items: center;
		z-index: 100;
		padding: 10px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.image-container {
		margin-right: 10px;
	}

	fui-textarea {
		flex: 1;
		margin-right: 10px;
	}
</style>